<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			*{
				padding:  0;
				margin: 0;
				list-style: none;
			}
			.all{
				width: 500px;
				height: 200px;
				padding: 7px;
				border: 1px solid #ccc;
				margin: 100px auto;
				position: relative;
			}
			.screen{
				width: 500px;
				height: 200px;
				overflow: hidden;
				position: relative;
			}
			.screen li{
				width: 500px;
				height: 200px;
				overflow: hidden;
				float: left;
			}
			.screen ul{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 3000px;
			}
			.all ol{
				position: absolute;
				right: 10px;
				bottom: 10px;
				line-height: 20px;
				text-align: center;
			}
			.all ol li{
				float: left;
				width: 20px;
				height: 20px;
				background-color: #fff;
				border: 1px solid #ccc;
				margin-left: 10px;
				cursor: pointer;
			}
			.all ol li.current{
				background-color: yellow;
			}
			#arr{
				display: none;
			}
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background-color: #000;
				text-align: center;
				line-height: 40px;
				font-family: "黑体";
				font-weight: bold;
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 5px;
				left: auto;
			}
        </style>
    </head>
    <body>
    	<div class="all" id="box">
    		<div class="screen">
    			<ul>
    				<li><img src="images/21.jpg" alt=""></li>
    				<li><img src="images/22.jpg" alt=""></li>
    				<li><img src="images/23.jpg" alt=""></li>
    				<li><img src="images/24.jpg" alt=""></li>
    				<li><img src="images/25.jpg" alt=""></li>
    				<li><img src="images/21.jpg" alt=""></li>
    			</ul>
    			<ol>
    			</ol>
    		</div>
    		<div id="arr"><span id="left">&lt</span><span id="right">&gt</span></div>
    	</div>
    </body>
    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
    	//获取screen层
    	var screen = $("#box").children('.screen');
    	//获取图片的宽度
    	var imgWidth = screen.width();
    	//获取ul层
    	var ul = screen.children('ul');
    	//获取li
    	var lis = ul.children();
    	//获取ol
    	var ol = screen.children('ol');
    	//定义一个变量 用来存储图片的位置
    	var pic = 0
    	//根据ul中的li个数 创建ol中的li
    	for (var i = 0; i < lis.length-1; i++) {
    		var li = document.createElement("li");
    		ol.append(li);
    		//设置li中的内容
    		li.innerHTML = i + 1;
    		$(li).attr('index', i);
    		//给每个li绑定事件
    		$(li).on("mouseover", function  () {
    			$(this).addClass('current').siblings('li').removeClass('current')
    			//获取Index
    			var index = parseInt($(this).attr("index"))
    			pic = index
    			ul.animate({left: -imgWidth*index}, 1100)
    		});
    	};
    	//设置ol中的第一个li标签的默认样式
    	$("ol li:first-child").addClass('current');
    	
    	//添加计时器，轮播图开始轮播
    	var setId = setInterval( rightHandle, 2000);
    	
    	//注册鼠标移入移出事件
    	$("#box").on( "mouseover", function  () {
    		$("#arr").show();
    		clearInterval(setId);
    	});
    	$("#box").on('mouseout', function() {
    		$("#arr").hide();
    		setId = setInterval( rightHandle, 2000);
    	});
    	
    	//为左右焦点注册点击事件
    	$("#right").click(function(){
    		clearInterval(setId);
    		rightHandle();
    	});
    	$("#left").click(function(){
    		clearInterval(setId);
    		leftHandle();
    	});
    	
    	//左右轮播的方法
    	var flag=true;	//定义一个布尔值来防止多次点击出现时间与动画的冲突问题
    	function rightHandle () {
    		if(flag){
    			flag=false
	    			//判断当前图片的位置是否是最后一张
	    		if (pic >= lis.length-1) {
	    			pic = 0
	    			ul.css('left', "0px")
	    		};
	    		pic ++
	    		ul.animate({left: -pic * imgWidth}, 1000,function(){
	    			flag=true;
	    		});
	    		
	    		if(pic >= lis.length-1){
	    			$("ol li").eq(0).addClass('current').siblings('li').removeClass("current")
	    		}else{
	    			$("ol li").eq(pic).addClass('current').siblings('li').removeClass("current")
	    		}
    		}
    	}
    	function leftHandle () {
    		if(flag){
    			flag=false
    			//判断图片的位置是否是第一张
	    		if (pic <= 0) {
	    			pic = lis.length-1
	    			ul.css('left', -pic * imgWidth + "px") 
	    		}
	    		pic --
	    		ul.animate({left: -pic * imgWidth}, 1000,function(){
	    			flag=true;
	    		})
	    		$("ol li").eq(pic).addClass('current').siblings('li').removeClass("current")
    		}
    	}
    </script>
</html>
